import React, {useState} from "react";
import {Button, Grid} from "@material-ui/core";
import {AddRounded, CloudDownloadRounded, MapRounded, PublishRounded} from "@material-ui/icons";
import withSpinner from "../../hoc/withSpinner";
import {getVehicles} from "../../shared/services/data.service";
import {EnhancedTable, Toolbar} from "../../shared/components";


const ViewAllVehicle = ({onAdd, onRowClick, ...props}) => {
    const [vehicleList, setVehicleList] = useState([]);

    const getVehicleList = () => (
        new Promise((resolve, reject) => {
            getVehicles().then(res => {
                setVehicleList(res.data);
                resolve(res.data);
            }).catch(error => reject(error));
        })
    );

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Vehicle Inventory"
                actions={
                    <React.Fragment>
                        <Button
                            variant="contained"
                            color="primary"
                            startIcon={<AddRounded/>}
                            onClick={onAdd}
                        >
                            Add New Vehicle
                        </Button>
                        <Button variant="contained" startIcon={<MapRounded/>}>Map View</Button>
                        <Button variant="outlined" startIcon={<PublishRounded/>}>Bulk Upload</Button>
                    </React.Fragment>
                }
            />

            <Grid item xs={12}>
                <EnhancedTable
                    title={"Vehicle List"}
                    schema={[
                        {id: 'vehicle_number', label: 'No.', sort: true},
                        {id: 'category', label: 'Category', sort: true},
                        {id: 'name', label: 'Name', sort: true},
                        {id: 'model', label: 'Model', sort: true},
                        {id: 'meter_reading', label: 'Meter', sort: true},
                        {id: 'status', label: 'Status', sort: true}
                    ]}
                    async={{loading: true, loadingData: getVehicleList}}
                    pagination={vehicleList.length > 5}
                    onRowClick={onRowClick}
                    actions={[{id: "downloadExcel", tooltip: "Download Excel", icon: CloudDownloadRounded}]}
                />
            </Grid>
        </Grid>
    );
};

export default withSpinner(ViewAllVehicle);
